<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body{
            background-color: #f25288;
            padding: 1%;
            margin-top: 15%;
            margin-left: 41%;
        }
        .card {
            width: 210px;
            height: 254px;
            border-radius: 4px;
            background: #212121;
            display: flex;
            gap: 5px;
            padding: .4em;
            
        }

        .card p {
            height: 100%;
            flex: 1;
            overflow: hidden;
            cursor: pointer;
            border-radius: 2px;
            transition: all .5s;
            background: #212121;
            border: 1px solid #c84470;
            display: flex;
            justify-content: center;
            align-items: center;
            transform: scale(1.0);
        }

        .card p:hover {
            flex: 4;
        }

        .card p span {
            min-width: 14em;
            padding: .5em;
            text-align: center;
            transform: rotate(-90deg);
            transition: all .5s;
            text-transform: uppercase;
            color: #ff568e;
            letter-spacing: .1em;
        }

        .card p:hover span {
            transform: rotate(0);
        }
    </style>
</head>
<body>
    <div class="card">
        <p><span>HOVER ME</span></p>
        <p><span>HOVER ME</span></p>
        <p><span>HOVER ME</span></p>
    </div>
</body>
</html>
